﻿<template>
  <a-modal
    :title="title"
    width="40%"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleSubmit"
    @cancel="()=>{this.visible=false}"
  >
    <a-spin :spinning="loading">
      <a-form-model ref="form" :model="entity" :rules="rules" v-bind="layout">
        <!-- <a-form-model-item label="保险名称" prop="InsuranceId">
          <a-input v-model="entity.InsuranceId" autocomplete="off" />
        </a-form-model-item> -->
        <a-form-model-item label="保险名称" prop="InsuranceId">
          <a-select v-model="entity.InsuranceId" allowClear >
            <a-select-option v-for="item in InsOptionList" :key="item.Name">{{ item.Name }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="出单人" prop="StoreId">
          <a-select v-model="entity.StoreId" allowClear >
            <a-select-option v-for="item in UserOptionList" :key="item.RealName">{{ item.RealName }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <!-- <a-form-model-item label="售出门店" prop="StoreId">
          <a-input v-model="entity.StoreId" autocomplete="off" />
        </a-form-model-item> -->
        <a-form-model-item label="顾客姓名" prop="CustomerName">
          <a-input v-model="entity.CustomerName" autocomplete="off" />
        </a-form-model-item>
        <a-form-model-item label="顾客电话" prop="CustomerPhone">
          <a-input v-model="entity.CustomerPhone" autocomplete="off" />
        </a-form-model-item>
        <!-- <a-form-model-item label="手机品牌" prop="BrandId">
          <a-input v-model="entity.BrandId" autocomplete="off" />
        </a-form-model-item> -->
        <a-form-model-item label="手机品牌" prop="BrandId">
          <a-select v-model="entity.BrandId" allowClear >
            <a-select-option v-for="item in BrandOptionList" :key="item.Name">{{ item.Name }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="手机型号" prop="PhoneModelId">
          <a-select v-model="entity.PhoneModelId" allowClear >
            <a-select-option v-for="item in ModelOptionList" :key="item.Name">{{ item.Name }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <!-- <a-form-model-item label="手机型号" prop="PhoneModelId">
          <a-input v-model="entity.PhoneModelId" autocomplete="off" />
        </a-form-model-item> -->
        <a-form-model-item label="IMEI码" prop="IMEI">
          <a-input v-model="entity.IMEI" autocomplete="off" />
        </a-form-model-item>
        <a-form-model-item label="激活时间" prop="ActiveTime">
          <a-input v-model="entity.ActiveTime" autocomplete="off" />
        </a-form-model-item>
        <a-form-model-item label="状态" prop="State">
            <a-select v-model="entity.State">
               <a-select-option :value="State.xiadan">提交保单</a-select-option>
               <a-select-option :value="State.shenqing">申请理赔</a-select-option>
               <a-select-option :value="State.lipei">理赔审批</a-select-option>
           </a-select>
          <!-- <a-input v-model="entity.State" autocomplete="off" /> -->
        </a-form-model-item>
        <a-form-model-item label="备注" prop="Desc">
          <a-input v-model="entity.Desc" autocomplete="off" />
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
export default {
  props: {
    parentObj: Object
  },
  data() {
    return {
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 }
      },
      State:{
        xiadan:"已下单",
        shenqing:"已申请",
        lipei:"已理赔",
      },
      queryParam: { status:"全部" },
      visible: false,
      loading: false,
      entity: {},
      InsOptionList: [],
      UserOptionList:[],
      BrandOptionList:[],
      ModelOptionList:[],
      rules: {
        InsuranceId: [{ required: true, message: '必填' }],
        StoreId: [{ required: true, message: '必填' }],
        CustomerName: [{ required: true, message: '必填' }],
        CustomerPhone: [{ required: true, message: '必填' }],
        BrandId: [{ required: true, message: '必填' }],
        PhoneModelId: [{ required: true, message: '必填' }],
        IMEI: [{ required: true, message: '必填' }],
        ActiveTime: [{ required: true, message: '必填' }],
        State: [{ required: true, message: '必填' }]
      },
      title: ''
    }
  },
  methods: {
    init() {
      this.visible = true
      this.entity = {}
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
      this.$http.post('/Ins/Insurance/GetDataList', {}).then(resJson => {
        if (resJson.Success) {
          this.InsOptionList = resJson.Data
        }
      })
      this.$http.post('/Base_Manage/Base_User/GetDataList', {}).then(resJson => {
        if (resJson.Success) {
          this.UserOptionList = resJson.Data
        }
      })
      this.$http.post('/Brands/Brand/GetDataList', {}).then(resJson => {
        if (resJson.Success) {
          this.BrandOptionList = resJson.Data
        }
      })
      this.$http.post('/Models/PhoneModel/GetDataList', {}).then(resJson => {
        if (resJson.Success) {
          this.ModelOptionList = resJson.Data
        }
      })
    },
    openForm(id, title) {
      this.init()

      if (id) {
        this.loading = true
        this.$http.post('/Order/Orders/GetTheData', { id: id }).then(resJson => {
          this.loading = false

          this.entity = resJson.Data
        })
      }
    },
    handleSubmit() {
      this.$refs['form'].validate(valid => {
        if (!valid) {
          return
        }
        this.loading = true
        this.$http.post('/Order/Orders/SaveData', this.entity).then(resJson => {
          this.loading = false

          if (resJson.Success) {
            this.$message.success('操作成功!')
            this.visible = false

            this.parentObj.getDataList()
          } else {
            this.$message.error(resJson.Msg)
          }
        })
      })
    }
  }
}
</script>
